<template>
  <div>
    <h1>{{ $store.state.num }}</h1>
    <h2>计算属性{{ num }}</h2>
    <h3>vuex中getters {{ numText }}</h3>

    <button @click="aaa">直接修改num</button>
    <button @click="bbb">异步修改num</button>
  </div>
</template>

<script>
// vuex提供辅助函数 进一步简化使用vuex的体验
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
// const obj1 = mapState(["num"]);
export default {
  // 在created 生命周期函数 查看 vuex中的数据
  created() {
    // console.log(this.$store);
  },
  // 计算属性 来简化使用 vuex的步骤 state
  computed: {
    // num() {
    //   return this.$store.state.num;
    // },
    // mapState 函数 返回一个对象 接收参数
    // ... 展开运算符
    // ...obj1,
    ...mapState(["num"]),
    ...mapGetters(["numText"]),

    // numText() {
    //   return this.$store.getters.numText;
    // },
  },
  methods: {
    ...mapMutations(["setNum"]),
    ...mapActions(["asyncSetNum"]),
    // 点击按钮
    aaa() {
      // 提交mutations
      // this.$store.commit("setNum", 1);

      this.setNum(1);
    },

    // 点击按钮 异步
    bbb() {
      // mutation 提交  commit(...
      // actions 派发   dispatch ....
      // this.$store.dispatch("asyncSetNum");
      this.asyncSetNum();
    },
  },
};
</script>

<style></style>
